<template>
  <view class="phxx-item-detail">
    <view class="content-box">
      <view class="bottom block-back">
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>供应商：</view>
          <view class="uni-form-value">{{ inputObj.supplierName }}</view>
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>产品类别：</view>
          <view class="uni-form-value">{{ inputObj.productType }}</view>
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>产品名称：</view>
          <view class="uni-form-value">{{ inputObj.proName }}</view>
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>产品价格：</view>
          <view class="uni-form-value">{{ inputObj.proPrice }}元/吨</view>
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>发热量：</view>
          <view class="uni-form-value">{{ inputObj.calorificValue || 0 }}大卡</view>
        </view>
        <view class="uni-form-item">
          <view class="title">灰分：</view>
          <view class="uni-form-value">{{ inputObj.ashContent || 0 }}%</view>
        </view>
        <view class="uni-form-item">
          <view class="title">硫分：</view>
          <view class="uni-form-value">{{ inputObj.sulfurContent || 0 }}%</view>
        </view>
        <view class="uni-form-item">
          <view class="title">水分：</view>
          <view class="uni-form-value">{{ inputObj.hydration || 0 }}%</view>
        </view>
        <view class="uni-form-item">
          <view class="title">挥发分：</view>
          <view class="uni-form-value">{{ inputObj.volatileMatter || 0 }}%</view>
        </view>
        <view class="uni-form-item" style="height: 220rpx; justify-content: flex-start">
          <view class="title">化验单：</view>
          <image v-if="inputObj.assayReport" :src="inputObj.assayReport.url" @click="clickImg"></image>
        </view>
        <view class="btns">
          <button type="default" @click="deleteTip()">删除</button>
          <button type="primary" @click="linkToEdit()">编辑</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { toast } from '@/utils/common';
  import {
    getProductById,
    deleteProduct,
    getProductByEnterId
  } from '@/api/product';
  export default {
    data() {
      return {
        coalTypeList: [],
        inputObj: {
          supplierName: '',
          productType: '',
          proName: '',
          proPrice: '',
          calorificValue: '',
          ashContent: '',
          sulfurContent: '',
          hydration: '',
          volatileMatter: '',
          assayReport: null
        }
      };
    },
    async onLoad(option) {
      this.inputObj.id = option.id;
      await this.getProductByEnterId();
      this.getProductById();
    },

    methods: {
      clickImg() {
        uni.previewImage({
          urls: [this.inputObj.assayReport?.url]
        });
      },

      async getProductByEnterId() {
        const res = await getProductByEnterId();
        if (res?.code === 0) {
          this.coalTypeList = res?.data || [];
        } else {
          toast('请求失败');
        }
      },

      async getProductById() {
        try {
          const data = { id: this.inputObj.id };
          const res = await getProductById(data);
          if (res.code === 0) {
            const result = res.data;
            if (result) {
              result.productType = this.coalTypeList.find(
                (e) => e.code === result.productType
              )?.value;
            }
            this.inputObj = result;
          }
        } catch {
          return false;
        }
      },

      deleteTip() {
        uni.showModal({
          title: '系统提示',
          content: '确认删除该产品？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) this.deleteProduct();
          }
        });
      },

      async deleteProduct() {
        const res = await deleteProduct(this.inputObj.id);
        if (res?.code === 0) {
          uni.redirectTo({
            url: '/packageB/pages/product/index'
          });
          toast('删除成功');
        } else {
          toast('删除失败');
        }
      },

      linkToEdit() {
        uni.setStorageSync('title', '编辑产品');
        uni.redirectTo({
          url: `/packageB/pages/common/product-editting/index?id=${this.inputObj.id}`
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .uni-form-item {
    border-bottom: 1px solid #E6E6E6;
    display: flex;
    justify-content: space-between;
    line-height: 100rpx;
    height: 100rpx;
    color: #333;

    .title {
      width: 185rpx;
    }

    .uni-input {
      flex: 3;
      border: 1px solid #fff;
      height: 70rpx;
      line-height: 70rpx;
      border-radius: 10rpx;
      padding: 0 10rpx;
      background-color: #fff;
      bottom: -14rpx;
      position: relative;
    }

    .uni-select-box {
      width: calc(100% - 186rpx);
      display: flex;
      justify-content: space-between;
      background: #fff;

      picker {
        width: 100%;
      }
    }
  }

  .phxx-item-detail {
    box-sizing: border-box;
    font-size: 14px;
    color: #000;
    margin: 20rpx;

    .content-box {
      .bottom {
        padding: 20rpx;
        font-size: 26.66rpx;
      }

      .btns {
        position: fixed;
        bottom: 0;
        height: 150rpx;
        width: 100%;
        margin: auto;
        z-index: 99;
        left: 0;
        right: 0;
        padding: 20rpx;
        background-color: #fff;
      }
    }
  }
</style>